<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Start with pixi.js</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.4.3/pixi.min.js"></script>
<script type="text/javascript">
//别名（Aliases）
var Container = PIXI.Container,
    autoDetectRenderer = PIXI.autoDetectRenderer,
    loader = PIXI.loader,
    resources = PIXI.loader.resources,
    TextureCache = PIXI.utils.TextureCache,
    Rectangle = PIXI.Rectangle,
    Sprite = PIXI.Sprite;

//基础代码
var stage = new Container(),
    renderer = autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

//读取文件的路径设置与读取后执行的函数
loader
  .add(["images/tileset.png"])
  .load(setup);

function setup() {
  // 使用TextureCache function
  var texture = TextureCache["images/tileset.png"];

  // 新的长方形（x坐标，y坐标，宽度，高度）
  var rectangle = new Rectangle(192, 128, 64, 64);

  // 将切出来的长方形传递
  texture.frame = rectangle;

  // 将火箭作为精灵使用
  var rocket = new Sprite(texture);

  // 放置在canvas的某个位置
  rocket.x = 32;
  rocket.y = 32;

  stage.addChild(rocket);  
  renderer.render(stage);
}
</script>
</body>
</html>